<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <link rel="stylesheet" href="/public/bootstrap.min.css">
  <link rel="stylesheet" href="/public/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/style-light.css">
  
  <script src="/public/jquery.min.js"></script>
  <script src="/public/dayjs.min.js"></script>
  <script src="/public/bootstrap.bundle.min.js"></script>
  <script src="/public/util.js"></script>
  <script src="/public/imagelist.js"></script>
  <script src="/public/searchform.js"></script>
  
  <title>Images - localtags</title>
  <style>
    .ImageButtons > * {
      color: lightgray;
    }
    .DeleteRecycle {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="root" class="container"></div>
  <script>

const Alerts = CreateAlerts();

const [InfoBtn, InfoMsg] = CreateInfoPair('使用说明', m('ul').append([
  m('li').text('本页默认列出最近图片（有数量限制，可在 config.json 文件中修改），使用搜索功能可列出更多图片。'),
  m('li').text('在本页点击删除按钮会把文件扔进回收站，以后可去回收站找回文件。'),
  m('li').text('如需修改文件名或修改标签，请点击图片的 ID。'),
]));

const Navbar = {
  view: () => m('nav').addClass('navbar navbar-light bg-light').append([
    m('div').addClass('container-fluid').append([
      m('a').attr({title:'main menu',href:'/light/home',type:'button'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-house-door')),
      m('span').addClass('navbar-brand').append([
        m('span').addClass('PageTitle').text('Images'), ' ', m(InfoBtn),
      ]),
      m('button').attr({title:'Search',type:'button'}).addClass('AllFilesBtn btn btn-outline-dark').append(
        m('i').addClass('bi bi-search'),
      ).click(() => {
        $('.SearchForm').toggle();
        $(SearchInput.id).focus();
      }),
    ]),
  ]),
};

$('#root').append([
  m(Navbar).addClass('my-2'),
  m(InfoMsg).hide(),
  m(SearchForm).addClass('my-2').hide(),
  m(Loading).addClass('my-5'),
  m(Alerts),
  m(ImageList).addClass('ImageList mt-3 d-flex justify-content-around flex-wrap'),
  m(BottomLine),
]);
  
init()

function init() {
  ajax({method:'GET',url:'/api/all-images',alerts:Alerts},
    (files) => {
      if (!files || files.length == 0) {
        Alerts.insert('info', '数据库中没有未删除的图片。');
        return;
      }
      ImageList.append(files);
    }, null, () => {
      Loading.hide();
      console.log('高级功能：使用命令 "delete_file(id)" 把文件扔进回收站，以后可去回收站找回文件。');
    });
}

    </script>
  </body>
</html>
